<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>FlexiBus Demo using AJAX</title>

        <script type="text/javascript" src="autocomplete.js"></script>
        <script type="text/javascript" src="search.js"></script>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
        
	
        <link rel="stylesheet" href="DatePicker/datepicker.css">
	<script type="text/javascript" language="javascript" src="DatePicker/prototype-1.js"></script>
	<script type="text/javascript" language="javascript" src="DatePicker/prototype-base-extensions.js"></script>
	<script type="text/javascript" language="javascript" src="DatePicker/prototype-date-extensions.js"></script>
	<script type="text/javascript" language="javascript" src="DatePicker/behaviour.js"></script>
	<script type="text/javascript" language="javascript" src="DatePicker/datepicker.js"></script>
	<script type="text/javascript" language="javascript" src="DatePicker/behaviors.js"></script>
     
     
  </head>
  <body onload="init()">
      
          <div id="head">
    <h1>FlexiBus Demo</h1>
    
    <h2>
        available stations:
    </h2>
    <table border="1">
        
        <tbody>
            <tr>
                <td><strong>BusStation Name</strong></td>
                <td>Universität</td>
                <td>Schwabstrasse</td>
                <td>Feuersee</td>
                <td>Stadtmitte</td>
                <td>Stuttgart Hauptbahnhof</td>
            </tr>
            <tr>
                <td><strong>TimeTable</strong></td>
                <td><table class="tableInSide">
                        <thead>
                            <tr>
                                <th class="tdInside">F1</th>
                                <th class="tdInside">F2</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="tdInside">12:00</td>
                                <td class="tdInside">12:30</td>
                            </tr>
                            <tr>
                                <td class="tdInside">13:00</td>
                                <td class="tdInside">13:30</td>
                            </tr>
                            <tr>
                                <td class="tdInside">14:00</td>
                                <td class="tdInside">14:30</td>
                            </tr>
                            <tr>
                                <td class="tdInside">15:00</td>
                                <td class="tdInside">15:30</td>
                            </tr>
                            <tr>
                                <td class="tdInside">16:00</td>
                                <td class="tdInside">16:30</td>
                            </tr>
                            <tr>
                                <td class="tdInside">17:00</td>
                                <td class="tdInside">17:30</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td><table class="tableInSide">
                        <thead>
                            <tr>
                                <th class="tdInside">F1</th>
                                <th class="tdInside">F2</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="tdInside">12:05</td>
                                <td class="tdInside">12:35</td>
                            </tr>
                            <tr>
                                <td class="tdInside">13:05</td>
                                <td class="tdInside">13:35</td>
                            </tr>
                            <tr>
                                <td class="tdInside">14:05</td>
                                <td class="tdInside">14:35</td>
                            </tr>
                            <tr>
                                <td class="tdInside">15:05</td>
                                <td class="tdInside">15:35</td>
                            </tr>
                            <tr>
                                <td class="tdInside">16:05</td>
                                <td class="tdInside">16:35</td>
                            </tr>
                            <tr>
                                <td class="tdInside">17:05</td>
                                <td class="tdInside">17:35</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td><table class="tableInSide">
                        <thead>
                            <tr>
                                <th class="tdInside">F1</th>
                                <th class="tdInside">F2</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="tdInside">12:07</td>
                                <td class="tdInside">12:37</td>
                            </tr>
                            <tr>
                                <td class="tdInside">13:07</td>
                                <td class="tdInside">13:37</td>
                            </tr>
                            <tr>
                                <td class="tdInside">14:07</td>
                                <td class="tdInside">14:37</td>
                            </tr>
                            <tr>
                                <td class="tdInside">15:07</td>
                                <td class="tdInside">15:37</td>
                            </tr>
                            <tr>
                                <td class="tdInside">16:07</td>
                                <td class="tdInside">16:37</td>
                            </tr>
                            <tr>
                                <td class="tdInside">17:07</td>
                                <td class="tdInside">17:37</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td><table class="tableInSide">
                        <thead>
                            <tr>
                                <th class="tdInside">F1</th>
                                <th class="tdInside">F2</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="tdInside">12:09</td>
                                <td class="tdInside">12:39</td>
                            </tr>
                            <tr>
                                <td class="tdInside">13:09</td>
                                <td class="tdInside">13:39</td>
                            </tr>
                            <tr>
                                <td class="tdInside">14:09</td>
                                <td class="tdInside">14:39</td>
                            </tr>
                            <tr>
                                <td class="tdInside">15:09</td>
                                <td class="tdInside">15:39</td>
                            </tr>
                            <tr>
                                <td class="tdInside">16:09</td>
                                <td class="tdInside">16:39</td>
                            </tr>
                            <tr>
                                <td class="tdInside">17:09</td>
                                <td class="tdInside">17:39</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td><table class="tableInSide">
                        <thead>
                            <tr>
                                <th class="tdInside">F1</th>
                                <th class="tdInside">F2</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td class="tdInside">12:10</td>
                                <td class="tdInside">12:40</td>
                            </tr>
                            <tr>
                                <td class="tdInside">13:10</td>
                                <td class="tdInside">13:40</td>
                            </tr>
                            <tr>
                                <td class="tdInside">14:10</td>
                                <td class="tdInside">14:40</td>
                            </tr>
                            <tr>
                                <td class="tdInside">15:10</td>
                                <td class="tdInside">15:40</td>
                            </tr>
                            <tr>
                                <td class="tdInside">16:10</td>
                                <td class="tdInside">16:40</td>
                            </tr>
                            <tr>
                                <td class="tdInside">17:10</td>
                                <td class="tdInside">17:40</td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                
            </tr>
        </tbody>
    </table>
    </div>
          
    
    <div id="autofill">
    <h2>autofill form</h2>
    <form id="autofillform" action="calculatecost" method="GET">
        <input id="hidden_startStation" type="hidden" name="startStation" value="Feuersee">
        
        <input id="hidden_destinationStation" type="hidden" name="destinationStation" value="Stadtmitte"/>
        
        <input id="hidden_desireTime" type="hidden" name="desireTime" value="07-01-2014 18:31"/>
      <table id ="table"> 
        <tbody>
            
            <tr>
              <td><strong>Date & Time Selection:</strong></td>
              <td>
                  <input id="date-field" class="datetimepicker">
              </td>
          </tr>
          
          <tr>
            <td><strong>Start Station:</strong></td>
                        <td>
                            <input type="text"
                                   size="20" 
                                   id="complete-field-start"
                                   onkeyup="doCompletion(this.id)">
                        </td>
          </tr>
          <tr>
              <td id="auto-row-start" colspan="2">
                  <table id="complete-table-start" class="popupBox"></table>
              </td>
          </tr>
          
          <tr>
            <td><strong>Destination Station:</strong></td>
                        <td>
                            <input type="text"
                                   size="20" 
                                   id="complete-field-destination"
                                   onkeyup="doCompletion(this.id)">
                        </td>
          </tr>
          <tr>
              <td id="auto-row-destination" colspan="2">
                  <table id="complete-table-destination" class="popupBox"></table>
              </td>
          </tr>

          <tr>
              <td>
                  <input type="reset" value="reset" />
              </td>
              <td>
                  <input type="button" value="submit" onmousedown="getHiddenValue()" onmouseup="sendRequest()">
              </td>
          </tr>
          
          
       
          
          
        </tbody>
      </table>
   
         
                
    </form>
    
    </div>
    
    <div id="result">
        <h2>Result</h2>
        <table id="resultTable"></table>
            
   
    </div>
   
    

  </body>
</html>